<template>
  <div class="tagBall" ref="tagBall" @mouseover.self.stop="mouseOver" @mouseleave.self.stop="mouseLeave">
    <p v-for="(item, index) in wordList" :key="index" class="tag">{{ item }}</p>
  </div>
</template>

<script>
export default {
  name: "stat",
  components: {},
  data() {
    return {
      tagEle: "",
      paper: "",
      RADIUS: 150,
      fallLength: 500,
      tags: [],
      angleX: Math.PI / 100,
      angleY: Math.PI / 100,
      CX: "",
      CY: "",
      EX: "",
      EY: "",
      timing: null,
      animateInterval: 200,
      wordList: ["java[100]", "vue[90]", "php[80]", "python[70]", "c[70]", "c++[70]", "c#[90]", "uniapp[80]", "AI[100]",]
    };
  },
  props: {},
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.tagEle = this.$refs.tagBall.children;
    this.paper = this.$refs.tagBall;
    this.CX = this.paper.offsetWidth / 2;
    this.CY = this.paper.offsetHeight / 2;
    this.EX =
      this.paper.offsetLeft +
      document.body.scrollLeft +
      document.documentElement.scrollLeft;
    this.EY =
      this.paper.offsetTop +
      document.body.scrollTop +
      document.documentElement.scrollTop;
    this.innit();
    this.animate();
  },
  methods: {
    innit() {
      for (var i = 0; i < this.tagEle.length; i++) {
        let a, b;
        const k = (2 * (i + 1) - 1) / this.tagEle.length - 1;
        a = Math.acos(k);
        b = a * Math.sqrt(this.tagEle.length * Math.PI);
        const x = this.RADIUS * Math.sin(a) * Math.cos(b);
        const y = this.RADIUS * Math.sin(a) * Math.sin(b);
        const z = this.RADIUS * Math.cos(a);
        // const t = this.tag({ ele: this.tagEle[i], x, y, z });
        this.tagEle[i].style.color =
          "rgb(" +
          parseInt(Math.random() * 255) +
          "," +
          parseInt(Math.random() * 255) +
          "," +
          parseInt(Math.random() * 255) +
          ")";
        this.tags.push({ele: this.tagEle[i], x, y, z});
      }
    },
    tag({ele, x, y, z}) {
      const scale = this.fallLength / (this.fallLength - z);
      const alpha = (z + this.RADIUS) / (2 * this.RADIUS);
      ele.style.fontSize = 15 * scale + "px";
      ele.style.opacity = alpha + 0.5;
      ele.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
      ele.style.zIndex = parseInt(scale * 100);
      ele.style.left = x + this.CX - ele.offsetWidth / 2 + "px";
      ele.style.top = y + this.CY - ele.offsetHeight / 2 + "px";
    },
    animate(mouse) {
      this.timing = setInterval(() => {
        this.rotateX();
        this.rotateY();
        this.tags.forEach((item) => {
          this.tag(item);
        });
      }, mouse === true ? 100 : this.animateInterval);
    },
    rotateX() {
      const cos = Math.cos(this.angleX);
      const sin = Math.sin(this.angleX);
      this.tags.forEach((item) => {
        const y1 = item.y * cos - item.z * sin;
        const z1 = item.z * cos + item.y * sin;
        item.y = y1;
        item.z = z1;
      });
    },
    rotateY() {
      const cos = Math.cos(this.angleY);
      const sin = Math.sin(this.angleY);
      this.tags.forEach((item) => {
        const x1 = item.x * cos - item.z * sin;
        const z1 = item.z * cos + item.x * sin;
        item.x = x1;
        item.z = z1;
      });
    },
    mouseOver(event) {
      const x = event.clientX - this.EX - this.CX;
      const y = event.clientY - this.EY - this.CY;
      console.log(x, y);
      this.angleY = x * 0.0001;
      this.angleX = y * 0.0001;
      this.closeAnimate();
      this.animate(true);
    },
    mouseLeave(event) {
      this.closeAnimate();
      this.animate();
    },
    closeAnimate() {
      clearInterval(this.timing);
      this.timing = null;
    },
  },
};
</script>
<style>
.tagBall {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  opacity: 0.7;
}

.tag {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
  text-decoration: none;
  font-size: 10px;
  font-weight: bold;
}
</style>
